<template>
    <div>hello</div>
    <button @click="save">保存</button>
    <button @click="add">增加</button>
    <table>
        <thead>
        <tr>
            <th>id</th>
            <th>dept</th>
            <th>user</th>
        </tr>
        </thead>
        <tbody>
        <tr v-for="item in userData" :key="item.id">
            <td><input v-model="item.id"></td>
            <td><input v-model="item.dept"></td>
            <td><input v-model="item.user"></td>
        </tr>
        </tbody>
    </table>
</template>
<script>
    import axios from 'axios';
    const fetchData = params => {
        return axios.get('/lee/mvc/get', {params: params});
    };
    export default {
        name: "App",
        data() {
            return {
                userData: []
            }
        },
        mounted() {
            this.fetch()
        },
        methods: {
            fetch(params={}) {
                fetchData({...params}).then(({data}) => {
                    this.userData = data
                });
            },
            save() {
                axios.get("/lee/mvc/put", {params: {"data": JSON.stringify(this.userData)}}).then(() => {
                    alert("保存完成")
                })
            },
            add() {
                this.userData.push({"id": "", "dept": "", "user": ""});
            }
        }
    }
</script>
